<script setup>
import {
    Edit
} from '@element-plus/icons-vue'
import { computed, onMounted, ref } from 'vue'
import { getUserListService, updateUserStatusService } from '@/apis/user'


const users = ref([]);
const total = ref(0)
const params = ref({
    page: 1,
    pageSize: 3
})

const getUserList = async () => {
    const res = await getUserListService(params.value)
    users.value = res.data.items
    total.value = res.data.total
}
onMounted(() => getUserList())

// 页数切换
const pageChange = (page) => {
    params.value.page = page
    getUserList()
}
const formatStatus = ({ status }) => {
    const statusMap = {
        0: '禁用',
        1: '启用',
    }
    return statusMap[status]
}

const dialogVisible = ref(false)

//添加用户数据模型
const user = ref({
    status: ''
})

//展示编辑弹窗
const showDialog = (row) => {
    dialogVisible.value = true
    //数据拷贝
    user.value.status = row.status.toString()
    user.value.id = row.id
}
const updateStatus = async () => {
    const res = await updateUserStatusService(user.value)
    ElMessage.success(res.message?res.message:"修改成功")
    getUserList()
    dialogVisible.value = false
}


</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>用户管理</span>
            </div>
        </template>
        <el-table :data="users" style="width: 100%">
            <el-table-column label="id" prop="id" ></el-table-column>
            <el-table-column label="用户名" prop="username"></el-table-column>
            <el-table-column label="昵称" prop="nickname"></el-table-column>
            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column label="头像" prop="userPic">
                <template v-slot="scope">
                    <img :src="scope.row.userPic" :alt="'图片' + scope.$index" style="width: 100px; height: 100px;">
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" width="70" :formatter="formatStatus"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button  :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination :total="total" @current-change="pageChange" :page-size="params.pageSize" background
                layout="prev, pager, next" />
        </div>
        <!-- 修改弹窗 -->
        <el-dialog v-model="dialogVisible" title="修改用户状态" width="30%">
            <el-form :model="user" label-width="100px" style="padding-right: 30px">
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="user.status">
                        <el-radio label="1">启用</el-radio>
                        <el-radio label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateStatus "> 确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pagination-container {
        display: flex;
        justify-content: center;
    }

}

</style>